<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <meta name="generator" content="VuePress 2.0.0-beta.27">
    <link rel="icon" href="favicon.ico"><meta name="keywords" content="Cosla前端,Cosla开发,Cosla文档,酷斯啦前端,酷斯啦开发,酷斯啦文档"><title>DetailsLeft 详情左侧 | 前端团队开发文档</title><meta name="description" content="Cosla开发，Cosla前端团队开发文档">
    <link rel="preload" href="/assets/js/runtime~app.7eeb5ba6.js" as="script"><link rel="preload" href="/assets/css/styles.a0dfb1ca.css" as="style"><link rel="preload" href="/assets/js/6135.d16fec79.js" as="script"><link rel="preload" href="/assets/js/app.4602c005.js" as="script">
    <link rel="stylesheet" href="/assets/css/styles.a0dfb1ca.css">
  </head>
  <body>
    <div id="app"><!--[--><div class="theme-container"><!--[--><header class="navbar"><div class="toggle-sidebar-button" title="toggle sidebar" aria-expanded="false" role="button" tabindex="0"><div class="icon" aria-hidden="true"><span></span><span></span><span></span></div></div><span><a href="/" class=""><!----><span class="site-name can-hide">前端团队开发文档</span></a></span><div class="navbar-links-wrapper" style=""><!--[--><!--]--><nav class="navbar-links can-hide"><!--[--><div class="navbar-links-item"><a href="/pages/resourcePack/" class="nav-link" aria-label="资源包"><!--[--><!--]--> 资源包 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/pages/knowledge/developmentNorm/" class="nav-link" aria-label="知识库"><!--[--><!--]--> 知识库 <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="开发事项"><span class="title">开发事项</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="开发事项"><span class="title">开发事项</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a href="/pages/developAttention/vehicleWebClient/" class="nav-link" aria-label="网页端"><!--[--><!--]--> 网页端 <!--[--><!--]--></a></li><li class="dropdown-item"><a href="/pages/developAttention/vehicleMiniprogram/" class="nav-link" aria-label="小程序端"><!--[--><!--]--> 小程序端 <!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="自定义组件"><span class="title">自定义组件</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="自定义组件"><span class="title">自定义组件</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a href="/pages/customComponents/vehicleWebClient/detailsLayout/" class="nav-link" aria-label="网页端"><!--[--><!--]--> 网页端 <!--[--><!--]--></a></li><li class="dropdown-item"><a href="/pages/customComponents/vehicleMiniprogram/plate/" class="nav-link" aria-label="小程序端"><!--[--><!--]--> 小程序端 <!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><!--]--></nav><!--[--><!--]--><button class="toggle-dark-button" title="toggle dark mode"><svg style="" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M16 12.005a4 4 0 1 1-4 4a4.005 4.005 0 0 1 4-4m0-2a6 6 0 1 0 6 6a6 6 0 0 0-6-6z" fill="currentColor"></path><path d="M5.394 6.813l1.414-1.415l3.506 3.506L8.9 10.318z" fill="currentColor"></path><path d="M2 15.005h5v2H2z" fill="currentColor"></path><path d="M5.394 25.197L8.9 21.691l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 25.005h2v5h-2z" fill="currentColor"></path><path d="M21.687 23.106l1.414-1.415l3.506 3.506l-1.414 1.414z" fill="currentColor"></path><path d="M25 15.005h5v2h-5z" fill="currentColor"></path><path d="M21.687 8.904l3.506-3.506l1.414 1.415l-3.506 3.505z" fill="currentColor"></path><path d="M15 2.005h2v5h-2z" fill="currentColor"></path></svg><svg style="display:none;" class="icon" focusable="false" viewBox="0 0 32 32"><path d="M13.502 5.414a15.075 15.075 0 0 0 11.594 18.194a11.113 11.113 0 0 1-7.975 3.39c-.138 0-.278.005-.418 0a11.094 11.094 0 0 1-3.2-21.584M14.98 3a1.002 1.002 0 0 0-.175.016a13.096 13.096 0 0 0 1.825 25.981c.164.006.328 0 .49 0a13.072 13.072 0 0 0 10.703-5.555a1.01 1.01 0 0 0-.783-1.565A13.08 13.08 0 0 1 15.89 4.38A1.015 1.015 0 0 0 14.98 3z" fill="currentColor"></path></svg></button><!----></div></header><!--]--><div class="sidebar-mask"></div><!--[--><aside class="sidebar"><nav class="navbar-links"><!--[--><div class="navbar-links-item"><a href="/pages/resourcePack/" class="nav-link" aria-label="资源包"><!--[--><!--]--> 资源包 <!--[--><!--]--></a></div><div class="navbar-links-item"><a href="/pages/knowledge/developmentNorm/" class="nav-link" aria-label="知识库"><!--[--><!--]--> 知识库 <!--[--><!--]--></a></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="开发事项"><span class="title">开发事项</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="开发事项"><span class="title">开发事项</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a href="/pages/developAttention/vehicleWebClient/" class="nav-link" aria-label="网页端"><!--[--><!--]--> 网页端 <!--[--><!--]--></a></li><li class="dropdown-item"><a href="/pages/developAttention/vehicleMiniprogram/" class="nav-link" aria-label="小程序端"><!--[--><!--]--> 小程序端 <!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><div class="navbar-links-item"><div class="dropdown-wrapper"><button class="dropdown-title" type="button" aria-label="自定义组件"><span class="title">自定义组件</span><span class="arrow down"></span></button><button class="mobile-dropdown-title" type="button" aria-label="自定义组件"><span class="title">自定义组件</span><span class="right arrow"></span></button><!--[--><ul style="display:none;" class="nav-dropdown"><!--[--><li class="dropdown-item"><a href="/pages/customComponents/vehicleWebClient/detailsLayout/" class="nav-link" aria-label="网页端"><!--[--><!--]--> 网页端 <!--[--><!--]--></a></li><li class="dropdown-item"><a href="/pages/customComponents/vehicleMiniprogram/plate/" class="nav-link" aria-label="小程序端"><!--[--><!--]--> 小程序端 <!--[--><!--]--></a></li><!--]--></ul><!--]--></div></div><!--]--></nav><!--[--><!--]--><ul class="sidebar-links"><!--[--><!--[--><a href="/pages/customComponents/vehicleWebClient/detailsLayout.html" class="nav-link sidebar-heading sidebar-item" aria-label="DetailsLayout 详情布局"><!--[--><!--]--> DetailsLayout 详情布局 <!--[--><!--]--></a><!----><!--]--><!--[--><a aria-current="page" href="/pages/customComponents/vehicleWebClient/detailsLeft.html" class="router-link-active router-link-exact-active nav-link router-link-active sidebar-heading sidebar-item active" aria-label="DetailsLeft 详情左侧"><!--[--><!--]--> DetailsLeft 详情左侧 <!--[--><!--]--></a><ul class=""><li><!--[--><a aria-current="page" href="/pages/customComponents/vehicleWebClient/detailsLeft.html#说明" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="说明"><!--[--><!--]--> 说明 <!--[--><!--]--></a><!----><!--]--></li><li><!--[--><a aria-current="page" href="/pages/customComponents/vehicleWebClient/detailsLeft.html#api" class="router-link-active router-link-exact-active nav-link sidebar-item" aria-label="API"><!--[--><!--]--> API <!--[--><!--]--></a><!----><!--]--></li></ul><!--]--><!--[--><a href="/pages/customComponents/vehicleWebClient/detailsRight.html" class="nav-link sidebar-heading sidebar-item" aria-label="DetailsRight 详情右侧"><!--[--><!--]--> DetailsRight 详情右侧 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/customComponents/vehicleWebClient/uploadExcel.html" class="nav-link sidebar-heading sidebar-item" aria-label="UploadExcel 导入导出excel"><!--[--><!--]--> UploadExcel 导入导出excel <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/customComponents/vehicleWebClient/cityArea.html" class="nav-link sidebar-heading sidebar-item" aria-label="CityArea 省市区级联选择器"><!--[--><!--]--> CityArea 省市区级联选择器 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/customComponents/vehicleWebClient/image.html" class="nav-link sidebar-heading sidebar-item" aria-label="Image 图片组件"><!--[--><!--]--> Image 图片组件 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/customComponents/vehicleWebClient/map.html" class="nav-link sidebar-heading sidebar-item" aria-label="Map 地图组件"><!--[--><!--]--> Map 地图组件 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/customComponents/vehicleWebClient/newQiniuUpload.html" class="nav-link sidebar-heading sidebar-item" aria-label="NewQiniuUpload 上传文件组件"><!--[--><!--]--> NewQiniuUpload 上传文件组件 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/customComponents/vehicleWebClient/pagination.html" class="nav-link sidebar-heading sidebar-item" aria-label="Pagination 分页组件"><!--[--><!--]--> Pagination 分页组件 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/customComponents/vehicleWebClient/popconfirm.html" class="nav-link sidebar-heading sidebar-item" aria-label="Popconfirm 确认删除对话框"><!--[--><!--]--> Popconfirm 确认删除对话框 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/customComponents/vehicleWebClient/splitLine.html" class="nav-link sidebar-heading sidebar-item" aria-label="SplitLine 分割线"><!--[--><!--]--> SplitLine 分割线 <!--[--><!--]--></a><!----><!--]--><!--[--><a href="/pages/customComponents/vehicleWebClient/uploadVideo.html" class="nav-link sidebar-heading sidebar-item" aria-label="UploadVideo 上传视频组件"><!--[--><!--]--> UploadVideo 上传视频组件 <!--[--><!--]--></a><!----><!--]--><!--]--></ul><!--[--><!--]--></aside><!--]--><!--[--><main class="page"><!--[--><!--]--><div class="theme-default-content"><!--[--><h1 id="detailsleft-详情左侧" tabindex="-1" data-v-0969fbdc><a class="header-anchor" href="#detailsleft-详情左侧" aria-hidden="true" data-v-0969fbdc>#</a> DetailsLeft 详情左侧</h1><h2 id="说明" tabindex="-1" data-v-0969fbdc><a class="header-anchor" href="#说明" aria-hidden="true" data-v-0969fbdc>#</a> 说明</h2><p data-v-0969fbdc>该组件用于详情左侧</p><div style="height:600px;" data-v-0969fbdc><div class="details-layout" data-v-0969fbdc data-v-5ef63d42><!--[--><div class="details-left-wrapper" data-v-0969fbdc data-v-d29d1012><div class="header" data-v-d29d1012><div class="title" data-v-d29d1012>车辆管理</div><!--[--><button class="ant-btn ant-btn-primary ant-btn-lg" type="button" data-v-0969fbdc><!----><!--[--><span>新 增</span><!--]--></button><!--]--></div><div class="search" data-v-d29d1012><!--[--><span class="ant-input-search ant-input-affix-wrapper" style="width:253px;" data-v-0969fbdc><!----><input value placeholder="车牌号" type="text" style="" class="ant-input"><span class="ant-input-suffix"><!----><span tabindex="-1" role="img" aria-label="search" class="anticon anticon-search ant-input-search-icon"><svg focusable="false" class="" data-icon="search" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewbox="64 64 896 896"><path d="M909.6 854.5L649.9 594.8C690.2 542.7 712 479 712 412c0-80.2-31.3-155.4-87.9-212.1-56.6-56.7-132-87.9-212.1-87.9s-155.5 31.3-212.1 87.9C143.2 256.5 112 331.8 112 412c0 80.1 31.3 155.5 87.9 212.1C256.5 680.8 331.8 712 412 712c67 0 130.6-21.8 182.7-62l259.7 259.6a8.2 8.2 0 0011.6 0l43.6-43.5a8.2 8.2 0 000-11.6zM570.4 570.4C528 612.7 471.8 636 412 636s-116-23.3-158.4-65.6C211.3 528 188 471.8 188 412s23.3-116.1 65.6-158.4C296 211.3 352.2 188 412 188s116.1 23.2 158.4 65.6S636 352.2 636 412s-23.3 116.1-65.6 158.4z"></path></svg></span></span></span><div class="ant-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search" style="width:241px;margin-left:12px;" data-v-0969fbdc><!----><!--[--><!----><div class="ant-select-selector"><!--[--><span class="ant-select-selection-search"><input id="rc_select_TEST_OR_SSR" autocomplete="off" class="ant-select-selection-search-input" style="" role="combobox" aria-haspopup="listbox" aria-owns="rc_select_TEST_OR_SSR_list" aria-autocomplete="list" aria-controls="rc_select_TEST_OR_SSR_list" aria-activedescendant="rc_select_TEST_OR_SSR_list_0" value type="search"></span><!----><span class="ant-select-selection-placeholder">车队名</span><!--]--></div><!--]--><span class="ant-select-arrow" style="user-select:none;webkit-user-select:none;" unselectable="on" aria-hidden="true"><span role="img" aria-label="down" class="anticon anticon-down ant-select-suffix"><svg focusable="false" class="" data-icon="down" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewbox="64 64 896 896"><path d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"></path></svg></span></span><!----></div><!--]--></div><div class="car-list" data-v-d29d1012><!--[--><div class="empty-content" data-v-d29d1012><div class="ant-empty" data-v-d29d1012><div class="ant-empty-image" style="width:190px;height:190px;"><img alt="empty" src="/empty_images/empty_simple.png"></div><p class="ant-empty-description"><!--[--><span style="font-size:18px;color:#8c8c8c;" data-v-d29d1012>暂无数据</span><!--]--></p><!----></div></div><!--]--></div><ul unselectable="unselectable" style="margin:18px auto 0;" data-v-d29d1012 class="ant-pagination mini" data-v-5edcf313><li class="ant-pagination-total-text">共 0 条</li><li title="Previous Page" class="ant-pagination-disabled ant-pagination-prev" aria-disabled="true"><a class="ant-pagination-item-link"><span role="img" aria-label="left" class="anticon anticon-left"><svg focusable="false" class="" data-icon="left" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewbox="64 64 896 896"><path d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"></path></svg></span></a></li><!--[--><li title="0" tabindex="0" class="ant-pagination-item ant-pagination-item-0 ant-pagination-item-disabled ant-pagination-disabled" style=""><a>0</a></li><!--]--><li title="Next Page" class="ant-pagination-disabled ant-pagination-next" aria-disabled="true"><a class="ant-pagination-item-link"><span role="img" aria-label="right" class="anticon anticon-right"><svg focusable="false" class="" data-icon="right" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewbox="64 64 896 896"><path d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"></path></svg></span></a></li><!----></ul></div><!--]--></div></div><details class="custom-container details" data-v-0969fbdc><summary data-v-0969fbdc>点击查看代码</summary><div class="language-vue ext-vue line-numbers-mode" data-v-0969fbdc><pre class="language-vue" data-v-0969fbdc><code data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;</span>div</span> <span class="token special-attr" data-v-0969fbdc><span class="token attr-name" data-v-0969fbdc>style</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span><span class="token value css language-css" data-v-0969fbdc><span class="token property" data-v-0969fbdc>height</span><span class="token punctuation" data-v-0969fbdc>:</span>600px<span class="token punctuation" data-v-0969fbdc>;</span></span><span class="token punctuation" data-v-0969fbdc>&quot;</span></span></span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span>
  <span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;</span>details-layout</span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span>
    <span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;</span>details-left</span>
      <span class="token attr-name" data-v-0969fbdc>title</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>车辆管理<span class="token punctuation" data-v-0969fbdc>&quot;</span></span>
      <span class="token attr-name" data-v-0969fbdc>:current</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>search.pageNum<span class="token punctuation" data-v-0969fbdc>&quot;</span></span>
      <span class="token attr-name" data-v-0969fbdc>:total</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>total<span class="token punctuation" data-v-0969fbdc>&quot;</span></span>
      <span class="token attr-name" data-v-0969fbdc>:pageSize</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>search.pageSize<span class="token punctuation" data-v-0969fbdc>&quot;</span></span>
    <span class="token punctuation" data-v-0969fbdc>&gt;</span></span>
    <span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;</span>template</span> <span class="token attr-name" data-v-0969fbdc>#header</span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span>
      <span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;</span>a-button</span> <span class="token attr-name" data-v-0969fbdc>type</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>primary<span class="token punctuation" data-v-0969fbdc>&quot;</span></span> <span class="token attr-name" data-v-0969fbdc>size</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>large<span class="token punctuation" data-v-0969fbdc>&quot;</span></span> <span class="token attr-name" data-v-0969fbdc>@click</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>handleAddVehicle<span class="token punctuation" data-v-0969fbdc>&quot;</span></span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span>
        新增
      <span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;/</span>a-button</span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span>
    <span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;/</span>template</span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span>
    <span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;</span>template</span> <span class="token attr-name" data-v-0969fbdc>#search</span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span>
      <span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;</span>a-input-search</span>
        <span class="token attr-name" data-v-0969fbdc><span class="token namespace" data-v-0969fbdc>v-model:</span>value</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>search.vehiclePlateNo<span class="token punctuation" data-v-0969fbdc>&quot;</span></span>
        <span class="token attr-name" data-v-0969fbdc>placeholder</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>车牌号<span class="token punctuation" data-v-0969fbdc>&quot;</span></span>
        <span class="token special-attr" data-v-0969fbdc><span class="token attr-name" data-v-0969fbdc>style</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span><span class="token value css language-css" data-v-0969fbdc><span class="token property" data-v-0969fbdc>width</span><span class="token punctuation" data-v-0969fbdc>:</span> 253px</span><span class="token punctuation" data-v-0969fbdc>&quot;</span></span></span>
        <span class="token attr-name" data-v-0969fbdc>@search</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>handleSearch<span class="token punctuation" data-v-0969fbdc>&quot;</span></span>
      <span class="token punctuation" data-v-0969fbdc>/&gt;</span></span>
      <span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;</span>a-select</span>
        <span class="token attr-name" data-v-0969fbdc><span class="token namespace" data-v-0969fbdc>v-model:</span>value</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>vehicleTeamName<span class="token punctuation" data-v-0969fbdc>&quot;</span></span>
        <span class="token attr-name" data-v-0969fbdc>show-search</span>
        <span class="token attr-name" data-v-0969fbdc>allow-clear</span>
        <span class="token attr-name" data-v-0969fbdc>placeholder</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>车队名<span class="token punctuation" data-v-0969fbdc>&quot;</span></span>
        <span class="token attr-name" data-v-0969fbdc>:options</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span>vehicleTeamNameOpt<span class="token punctuation" data-v-0969fbdc>&quot;</span></span>
        <span class="token special-attr" data-v-0969fbdc><span class="token attr-name" data-v-0969fbdc>style</span><span class="token attr-value" data-v-0969fbdc><span class="token punctuation attr-equals" data-v-0969fbdc>=</span><span class="token punctuation" data-v-0969fbdc>&quot;</span><span class="token value css language-css" data-v-0969fbdc><span class="token property" data-v-0969fbdc>width</span><span class="token punctuation" data-v-0969fbdc>:</span> 241px<span class="token punctuation" data-v-0969fbdc>;</span> <span class="token property" data-v-0969fbdc>margin-left</span><span class="token punctuation" data-v-0969fbdc>:</span> 12px</span><span class="token punctuation" data-v-0969fbdc>&quot;</span></span></span>
      <span class="token punctuation" data-v-0969fbdc>/&gt;</span></span>
    <span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;/</span>template</span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span>
    <span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;/</span>details-left</span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span>
  <span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;/</span>details-layout</span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span>
<span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;/</span>div</span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span>


<span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;</span>script</span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span><span class="token script" data-v-0969fbdc><span class="token language-javascript" data-v-0969fbdc>
  <span class="token keyword" data-v-0969fbdc>import</span> <span class="token punctuation" data-v-0969fbdc>{</span> message <span class="token punctuation" data-v-0969fbdc>}</span> <span class="token keyword" data-v-0969fbdc>from</span> <span class="token string" data-v-0969fbdc>&#39;ant-design-vue&#39;</span><span class="token punctuation" data-v-0969fbdc>;</span>
  <span class="token keyword" data-v-0969fbdc>import</span> <span class="token punctuation" data-v-0969fbdc>{</span> defineComponent<span class="token punctuation" data-v-0969fbdc>,</span> onBeforeMount<span class="token punctuation" data-v-0969fbdc>,</span> reactive<span class="token punctuation" data-v-0969fbdc>,</span> toRefs <span class="token punctuation" data-v-0969fbdc>}</span> <span class="token keyword" data-v-0969fbdc>from</span> <span class="token string" data-v-0969fbdc>&#39;vue&#39;</span>
  <span class="token keyword" data-v-0969fbdc>export</span> <span class="token keyword" data-v-0969fbdc>default</span> <span class="token function" data-v-0969fbdc>defineComponent</span><span class="token punctuation" data-v-0969fbdc>(</span><span class="token punctuation" data-v-0969fbdc>{</span>
    <span class="token function" data-v-0969fbdc>setup</span><span class="token punctuation" data-v-0969fbdc>(</span><span class="token parameter" data-v-0969fbdc>_<span class="token punctuation" data-v-0969fbdc>,</span> <span class="token punctuation" data-v-0969fbdc>{</span> emit <span class="token punctuation" data-v-0969fbdc>}</span></span><span class="token punctuation" data-v-0969fbdc>)</span> <span class="token punctuation" data-v-0969fbdc>{</span>
      <span class="token comment" data-v-0969fbdc>// 数据源</span>
      <span class="token keyword" data-v-0969fbdc>const</span> state <span class="token operator" data-v-0969fbdc>=</span> <span class="token function" data-v-0969fbdc>reactive</span><span class="token punctuation" data-v-0969fbdc>(</span><span class="token punctuation" data-v-0969fbdc>{</span>
        total<span class="token operator" data-v-0969fbdc>:</span> <span class="token number" data-v-0969fbdc>0</span><span class="token punctuation" data-v-0969fbdc>,</span>
        carList<span class="token operator" data-v-0969fbdc>:</span> <span class="token punctuation" data-v-0969fbdc>[</span><span class="token punctuation" data-v-0969fbdc>]</span><span class="token punctuation" data-v-0969fbdc>,</span>
        vehicleTeamName<span class="token operator" data-v-0969fbdc>:</span> <span class="token keyword" data-v-0969fbdc>undefined</span><span class="token punctuation" data-v-0969fbdc>,</span> <span class="token comment" data-v-0969fbdc>//车队名称</span>
        vehicleTeamNameOpt<span class="token operator" data-v-0969fbdc>:</span> <span class="token punctuation" data-v-0969fbdc>[</span>
          <span class="token punctuation" data-v-0969fbdc>{</span>
          value<span class="token operator" data-v-0969fbdc>:</span> <span class="token string" data-v-0969fbdc>&#39;vehicleTeam1&#39;</span><span class="token punctuation" data-v-0969fbdc>,</span>
          label<span class="token operator" data-v-0969fbdc>:</span> <span class="token string" data-v-0969fbdc>&#39;酷酷的服务站1&#39;</span><span class="token punctuation" data-v-0969fbdc>,</span>
          <span class="token punctuation" data-v-0969fbdc>}</span><span class="token punctuation" data-v-0969fbdc>,</span>
          <span class="token punctuation" data-v-0969fbdc>{</span>
          value<span class="token operator" data-v-0969fbdc>:</span> <span class="token string" data-v-0969fbdc>&#39;vehicleTeam2&#39;</span><span class="token punctuation" data-v-0969fbdc>,</span>
          label<span class="token operator" data-v-0969fbdc>:</span> <span class="token string" data-v-0969fbdc>&#39;酷酷的服务站2&#39;</span><span class="token punctuation" data-v-0969fbdc>,</span>
          <span class="token punctuation" data-v-0969fbdc>}</span><span class="token punctuation" data-v-0969fbdc>,</span>
        <span class="token punctuation" data-v-0969fbdc>]</span><span class="token punctuation" data-v-0969fbdc>,</span> <span class="token comment" data-v-0969fbdc>//车队名称集合</span>
        search<span class="token operator" data-v-0969fbdc>:</span> <span class="token punctuation" data-v-0969fbdc>{</span>
          pageNum<span class="token operator" data-v-0969fbdc>:</span> <span class="token number" data-v-0969fbdc>1</span><span class="token punctuation" data-v-0969fbdc>,</span>
          pageSize<span class="token operator" data-v-0969fbdc>:</span> <span class="token number" data-v-0969fbdc>30</span><span class="token punctuation" data-v-0969fbdc>,</span>
          vehiclePlateNo<span class="token operator" data-v-0969fbdc>:</span> <span class="token string" data-v-0969fbdc>&#39;&#39;</span><span class="token punctuation" data-v-0969fbdc>,</span>
          agencyId<span class="token operator" data-v-0969fbdc>:</span> <span class="token string" data-v-0969fbdc>&#39;&#39;</span><span class="token punctuation" data-v-0969fbdc>,</span> <span class="token comment" data-v-0969fbdc>//车队id</span>
        <span class="token punctuation" data-v-0969fbdc>}</span><span class="token punctuation" data-v-0969fbdc>,</span>
      <span class="token punctuation" data-v-0969fbdc>}</span><span class="token punctuation" data-v-0969fbdc>)</span>

      <span class="token doc-comment comment" data-v-0969fbdc>/**
       * <span class="token keyword" data-v-0969fbdc>@description</span>: 搜索号码号牌
       */</span>
      <span class="token keyword" data-v-0969fbdc>function</span> <span class="token function" data-v-0969fbdc>handleSearch</span><span class="token punctuation" data-v-0969fbdc>(</span><span class="token punctuation" data-v-0969fbdc>)</span> <span class="token punctuation" data-v-0969fbdc>{</span>
        message<span class="token punctuation" data-v-0969fbdc>.</span><span class="token function" data-v-0969fbdc>info</span><span class="token punctuation" data-v-0969fbdc>(</span><span class="token template-string" data-v-0969fbdc><span class="token template-punctuation string" data-v-0969fbdc>`</span><span class="token string" data-v-0969fbdc>搜索</span><span class="token interpolation" data-v-0969fbdc><span class="token interpolation-punctuation punctuation" data-v-0969fbdc>${</span>state<span class="token punctuation" data-v-0969fbdc>.</span>search<span class="token punctuation" data-v-0969fbdc>.</span>vehiclePlateNo<span class="token interpolation-punctuation punctuation" data-v-0969fbdc>}</span></span><span class="token template-punctuation string" data-v-0969fbdc>`</span></span><span class="token punctuation" data-v-0969fbdc>)</span><span class="token punctuation" data-v-0969fbdc>;</span>      
      <span class="token punctuation" data-v-0969fbdc>}</span>


      <span class="token doc-comment comment" data-v-0969fbdc>/**
       * <span class="token keyword" data-v-0969fbdc>@description</span>: 点击添加车辆
       */</span>
      <span class="token keyword" data-v-0969fbdc>function</span> <span class="token function" data-v-0969fbdc>handleAddVehicle</span><span class="token punctuation" data-v-0969fbdc>(</span><span class="token punctuation" data-v-0969fbdc>)</span> <span class="token punctuation" data-v-0969fbdc>{</span>
        message<span class="token punctuation" data-v-0969fbdc>.</span><span class="token function" data-v-0969fbdc>info</span><span class="token punctuation" data-v-0969fbdc>(</span><span class="token string" data-v-0969fbdc>&#39;点击添加车辆&#39;</span><span class="token punctuation" data-v-0969fbdc>)</span><span class="token punctuation" data-v-0969fbdc>;</span>      
      <span class="token punctuation" data-v-0969fbdc>}</span>

      <span class="token keyword" data-v-0969fbdc>return</span> <span class="token punctuation" data-v-0969fbdc>{</span>
        <span class="token operator" data-v-0969fbdc>...</span><span class="token function" data-v-0969fbdc>toRefs</span><span class="token punctuation" data-v-0969fbdc>(</span>state<span class="token punctuation" data-v-0969fbdc>)</span><span class="token punctuation" data-v-0969fbdc>,</span>
        handleAddVehicle<span class="token punctuation" data-v-0969fbdc>,</span>
        handleSearch
      <span class="token punctuation" data-v-0969fbdc>}</span>
    <span class="token punctuation" data-v-0969fbdc>}</span><span class="token punctuation" data-v-0969fbdc>,</span>
  <span class="token punctuation" data-v-0969fbdc>}</span><span class="token punctuation" data-v-0969fbdc>)</span>
</span></span><span class="token tag" data-v-0969fbdc><span class="token tag" data-v-0969fbdc><span class="token punctuation" data-v-0969fbdc>&lt;/</span>script</span><span class="token punctuation" data-v-0969fbdc>&gt;</span></span>
</code></pre><div class="line-numbers" data-v-0969fbdc><span class="line-number" data-v-0969fbdc>1</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>2</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>3</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>4</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>5</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>6</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>7</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>8</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>9</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>10</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>11</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>12</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>13</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>14</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>15</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>16</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>17</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>18</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>19</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>20</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>21</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>22</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>23</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>24</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>25</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>26</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>27</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>28</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>29</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>30</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>31</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>32</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>33</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>34</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>35</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>36</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>37</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>38</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>39</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>40</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>41</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>42</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>43</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>44</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>45</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>46</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>47</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>48</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>49</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>50</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>51</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>52</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>53</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>54</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>55</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>56</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>57</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>58</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>59</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>60</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>61</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>62</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>63</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>64</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>65</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>66</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>67</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>68</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>69</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>70</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>71</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>72</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>73</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>74</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>75</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>76</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>77</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>78</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>79</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>80</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>81</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>82</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>83</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>84</span><br data-v-0969fbdc><span class="line-number" data-v-0969fbdc>85</span><br data-v-0969fbdc></div></div></details><h2 id="api" tabindex="-1" data-v-0969fbdc><a class="header-anchor" href="#api" aria-hidden="true" data-v-0969fbdc>#</a> API</h2><p data-v-0969fbdc><strong data-v-0969fbdc>Props</strong></p><table data-v-0969fbdc><thead data-v-0969fbdc><tr data-v-0969fbdc><th data-v-0969fbdc>参数</th><th data-v-0969fbdc>说明</th><th data-v-0969fbdc>类型</th><th data-v-0969fbdc>默认值</th></tr></thead><tbody data-v-0969fbdc><tr data-v-0969fbdc><td data-v-0969fbdc>title</td><td data-v-0969fbdc>标题（必填）</td><td data-v-0969fbdc>String</td><td data-v-0969fbdc></td></tr><tr data-v-0969fbdc><td data-v-0969fbdc>current</td><td data-v-0969fbdc>当前页码</td><td data-v-0969fbdc>Number</td><td data-v-0969fbdc></td></tr><tr data-v-0969fbdc><td data-v-0969fbdc>pageSize</td><td data-v-0969fbdc>每页大小</td><td data-v-0969fbdc>Number</td><td data-v-0969fbdc>默认30</td></tr><tr data-v-0969fbdc><td data-v-0969fbdc>total</td><td data-v-0969fbdc>总数</td><td data-v-0969fbdc>Number</td><td data-v-0969fbdc></td></tr><tr data-v-0969fbdc><td data-v-0969fbdc>showPagination</td><td data-v-0969fbdc>是否显示分页</td><td data-v-0969fbdc>Boolean</td><td data-v-0969fbdc>true</td></tr><tr data-v-0969fbdc><td data-v-0969fbdc>showSearch</td><td data-v-0969fbdc>是否显示搜索</td><td data-v-0969fbdc>Boolean</td><td data-v-0969fbdc>true</td></tr></tbody></table><p data-v-0969fbdc><strong data-v-0969fbdc>Events</strong></p><table data-v-0969fbdc><thead data-v-0969fbdc><tr data-v-0969fbdc><th data-v-0969fbdc>名称</th><th data-v-0969fbdc>说明</th><th data-v-0969fbdc>参数</th></tr></thead><tbody data-v-0969fbdc><tr data-v-0969fbdc><td data-v-0969fbdc>onpagechange</td><td data-v-0969fbdc>翻页时触发</td><td data-v-0969fbdc>当前页码</td></tr></tbody></table><!--]--></div><footer class="page-meta"><!----><div class="meta-item last-updated"><span class="meta-item-label">上次更新: </span><span class="meta-item-info">2021-11-30 8:02:58</span></div><div class="meta-item contributors"><span class="meta-item-label">Contributors: </span><span class="meta-item-info"><!--[--><!--[--><span class="contributor" title="email: 1928537900@qq.com">jinleiFu</span><!----><!--]--><!--]--></span></div></footer><nav class="page-nav"><p class="inner"><span class="prev"> ← <a href="/pages/customComponents/vehicleWebClient/detailsLayout.html" class="nav-link" aria-label="DetailsLayout 详情布局"><!--[--><!--]--> DetailsLayout 详情布局 <!--[--><!--]--></a></span><span class="next"><a href="/pages/customComponents/vehicleWebClient/detailsRight.html" class="nav-link" aria-label="DetailsRight 详情右侧"><!--[--><!--]--> DetailsRight 详情右侧 <!--[--><!--]--></a> → </span></p></nav><!--[--><!--]--></main><!--]--></div><!----><!--]--></div>
    <script src="/assets/js/runtime~app.7eeb5ba6.js" defer></script><script src="/assets/js/6135.d16fec79.js" defer></script><script src="/assets/js/app.4602c005.js" defer></script>
  </body>
</html>
